K-ScaffoldContent Scaled Elements
adaptiveInput
Creates an html construction for creating a content-scaled input. You can apply classes and IDs to the container div by appending them to the mixin call (see the second example).
- inputObj -
object-The object describing the input as per the input mixin. You can apply classes and IDs to the container div by appending them to the mixin call (see the second example).
Example
pug
include k-scaffold
+adaptiveInput({name:'character description',type:'text'})
//Appending class directly to the mixin
+adaptiveInput({name:'character description',type:'text'}).custom-class
include k-scaffold
+adaptiveInput({name:'character description',type:'text'})
//Appending class directly to the mixin
+adaptiveInput({name:'character description',type:'text'}).custom-class
Output
html
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="adaptive adaptive--input">
<span class="adaptive--input__span" name="attr_character_description" title="@{character_description}"></span>
<input class="adaptive--input__input" name="attr_character_description" type="text" title="@{character_description}"/>
</div>
<!--Appending class directly to the mixin-->
<div class="adaptive adaptive--input custom-class">
<span class="adaptive--input__span" name="attr_character_description" title="@{character_description}"></span>
<input class="adaptive--input__input" name="attr_character_description" type="text" title="@{character_description}"/>
</div><button name="act_k-network-call" hidden="" type="action"></button>
<div class="adaptive adaptive--input">
<span class="adaptive--input__span" name="attr_character_description" title="@{character_description}"></span>
<input class="adaptive--input__input" name="attr_character_description" type="text" title="@{character_description}"/>
</div>
<!--Appending class directly to the mixin-->
<div class="adaptive adaptive--input custom-class">
<span class="adaptive--input__span" name="attr_character_description" title="@{character_description}"></span>
<input class="adaptive--input__input" name="attr_character_description" type="text" title="@{character_description}"/>
</div>adaptiveTextarea
Creates an html construction for creating a content-scaled textarea. You can apply classes and IDs to the container div by appending them to the mixin call (see the second example).
Example
pug
include k-scaffold
+adaptiveTextarea({name:'character description'})
//Appending the class directly to the mixin
+adaptiveTextarea({name:'character description'}).custom-class
include k-scaffold
+adaptiveTextarea({name:'character description'})
//Appending the class directly to the mixin
+adaptiveTextarea({name:'character description'}).custom-class
Output
html
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="adaptive adaptive--text">
<span class="adaptive--text__span" name="attr_character_description" title="@{character_description}"></span>
<textarea class="adaptive--text__textarea" name="attr_character_description" title="@{character_description}"></textarea>
</div>
<!--Appending the class directly to the mixin-->
<div class="adaptive adaptive--text custom-class">
<span class="adaptive--text__span" name="attr_character_description" title="@{character_description}"></span>
<textarea class="adaptive--text__textarea" name="attr_character_description" title="@{character_description}"></textarea>
</div><button name="act_k-network-call" hidden="" type="action"></button>
<div class="adaptive adaptive--text">
<span class="adaptive--text__span" name="attr_character_description" title="@{character_description}"></span>
<textarea class="adaptive--text__textarea" name="attr_character_description" title="@{character_description}"></textarea>
</div>
<!--Appending the class directly to the mixin-->
<div class="adaptive adaptive--text custom-class">
<span class="adaptive--text__span" name="attr_character_description" title="@{character_description}"></span>
<textarea class="adaptive--text__textarea" name="attr_character_description" title="@{character_description}"></textarea>
</div>